<template>
  <div class="pointModal">
    <el-dialog title="点位配置信息" v-model="dialogFormVisible">
      <el-form :model="form" ref="pointFrom" label-width="130px">
        <el-form-item label="ID:">
          <el-input v-model="form.id" placeholder="ID" readonly></el-input>
        </el-form-item>
        <el-form-item label="点位名称：">
          <el-input v-model="form.pointName" placeholder="点位名称"></el-input>
        </el-form-item>
        <el-form-item label="IP地址：">
          <el-input v-model="form.ipAddress" placeholder="IP地址"></el-input>
        </el-form-item>
        <el-form-item label="点位KEY：">
          <el-input v-model="form.pointKey" placeholder="点位key"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import pick from "lodash/pick";
import axios from 'axios';
export default {
  name: "pointModal",
  data() {
    return {
      dialogFormVisible: false,
      form: {},
      record: {},
    };
  },
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {
      this.record = { ...record };
      this.form = pick(this.record, [
        "id",
        "pointName",
        "ipAddress",
        "pointKey",
      ]);
      this.dialogFormVisible = true;
    },
    handleConfirm() {
      this.$refs.pointFrom.validate((valid) => {
        if (!valid) {
          return false;
        }
        const param = {
          ...this.record,
          ...this.form,
        };
        if (this.record.id) {
          console.log(this.record.id)
          // 编辑
          axios.post(`/config/update/${this.record.id}`, {
            "id": this.form.id,
            "pointName": this.form.pointName,
            "pointKey": this.form.pointKey,
            "ipAddress": this.form.ipAddress,
          }).then((res) => {
            if (res.data.code !== 200) {
              this.$message.error(res.message || "请求失败");
              return;
            }
            this.$message.success(res.message || "操作成功");
            this.dialogFormVisible = false;
            this.$emit("ok");
          }
          );
        } else {
          // 新建
          const config = { headers: { 'Content-Type': 'application/json' } };
          axios.post("/api/config/add", {
            "pointName": this.form.pointName,
            "pointKey": this.form.pointKey,
            "ipAddress": this.form.ipAddress,
          }, config).then((res) => {
            if (res.data.code !== 200) {
              this.$message.error(res.data.message || "请求失败");
              return;
            }
            this.$message.success(res.data.message || "操作成功");
            this.dialogFormVisible = false;
            this.$emit("ok");
          });
        }
      });
    },
  },
};
</script>
  